<template>
  
<div class="box">
<div class="boxone">
     <el-select v-model="value" class="m-2" placeholder="一年级一班">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
             <el-button type="primary" @click="fun()" >开始考勤</el-button>
</div>
 
    <div class="boxtwo">
       
    <el-table :data="tableData" border style="width: 100%" stripe="ture">
      <el-table-column prop="date" align=center label="序号" width="70" />
      <el-table-column prop="name" align=center label="年级班级" width="188" />
      <el-table-column prop="address"  width="187" align=center label="学生姓名" />
      <el-table-column prop="address"  width="187" align=center label="性别" />
      <el-table-column prop="address"  width="187" align=center label="学籍号" />
      <el-table-column prop="address"  width="187" align=center label="今日考勤状态" />
      <el-table-column prop="address"  width="187" align=center label="电话号码" />
    </el-table>
    <div class="boxstree">
         <el-pagination
    small
    background
    layout="prev, pager, next"
    :total="50"
    class="mt-4"
  />
    </div>
    </div>
</div>
</template>

<script setup>

import { useRouter } from 'vue-router'
//获取路由管理实例
var router = useRouter();

var fun=()=>{
router.push('/index/jiaxiaohudong/chuqin/dinming/dinmingone');
}
const tableData = [
 
   {
    date: "1",
    name: "Tom",
    address: "No. 189"
  },
   {
    date: "1",
    name: "Tom",
    address: "No. 189"
  },
   {
    date: "1",
    name: "Tom",
    address: "No. 189"
  },
   {
    date: "1",
    name: "Tom",
    address: "No. 189"
  },
 
];

import { ref } from 'vue'

const value = ref('')

const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
  ]
</script>

<style scoped>
.box{
    width: 100%;
} 
.boxtwo{
  width: 95%;
  background-color:  #fff;
  margin: 0 auto;
  text-align: center;

}
.el-option{
    margin-left: 5px;
}
.boxone{
    width: 95%;
    height: 50px;
    margin: 10px auto;
    /* background-color: aliceblue; */
    
}
.boxone>.el-button{
    margin:  10px 0;
  margin-left: 74%;

}
.boxstree{
  margin-left: 80%;
  margin-top: 20px;
  height: 35px;
}

</style>